<!--分页前端模板-->


<div class="table-pagination" th:fragment="pagination" style="float: left">
    <style type="text/css">

        .table-pagination { width: 100%; height: auto; line-height: 30px; text-align: left; }
        .pagination { position: relative; display: block; list-style:none; }
        .pagination li { display: inline-block; font-size: 14px; }

        .pagination li button { width: 50px; height: 30px; color: #9a9a9a; background: #EDEDED; border: 1px solid #E6E9ED; cursor: pointer; outline: none; }
        .pagination li button.bu_color { color: #373737; }
        .pagination li button.bu_color:hover { background: #2A3F54; color: #fff; border: 1px solid #2A3F54; }

        .pagination li a.a_button { float: initial; line-height: 30px; margin: 0; display: inline-block; padding: 0 5px; height: 30px; color: #373737; font-size: 12px; text-decoration: none; background: #EDEDED; border: 1px solid #E6E9ED; cursor: pointer; }
        .pagination li a.a_button:hover { background: #2A3F54; color: #fff; border: 1px solid #2A3F54; }
        .pagination li a.a_button.stop { color: #9a9a9a; }
        .pagination li a.a_button.stop:hover { background: #2A3F54; color: #9a9a9a; border: 1px solid #2A3F54; }

        .pagination li span.span_nb { display: inline-block; padding: 0 10px; height: 30px; color: #373737; font-size: 12px; background: #EDEDED; border: 1px solid #E6E9ED; cursor: pointer; }
        .pagination li span.span_nb:hover { background: #2A3F54; color: #fff; border: 1px solid #2A3F54; }
        .pagination li span.span_nb.on { background: #2A3F54; color: #fff; border: 1px solid #2A3F54; }

        .pagination li input { width: 60px; height: 30px; line-height: 30px; padding: 0; margin: 0 3px; text-align: center; border: 1px solid #2A3F54; outline: none; background: #fff; }
        .pagination li em { margin-left: 10px; font-style: normal; }

        .pagination li label span { margin: 0 3px; color: #2A3F54; }
        .pagination li.xf_li { position: absolute; top: 0; display: none; margin: 0 0 0 15px; }
        .pagination:hover li.xf_li { display: inline; }

        .pagination > li > a, .pagination > li > span { float: initial; padding: 0; background: none; line-height: inherit; border: 0; }
        .pagination > .disabled > a { background: none; }
        .pagination > .disabled > a:hover { background: none; }
    </style>
    <ul class="pagination">

        <!-- 首页 -->
        <li class="page-item" data-th-classappend="${(datas.number + 1) eq 1} ? 'active' : ''">
            <button class="page-state bu_color" th:onclick="'javascript:up(\''+'1'+'\');'">首页</button>
        </li>
        <!-- 上一页 -->
        <li th:class="${datas.number eq 0} ? 'disabled' : ''">
            <a class="a_button" th:if="${not datas.first}"
               th:onclick="'javascript:up(\''+${datas.number}+'\');'">上一页</a>
            <a class="a_button stop" th:if="${datas.first}" href="javascript:void(0);">上一页</a>
        </li>
        <!--页码-->
        <!-- 总页面小于等于3 -->
        <li class="page-item disabled this_y" th:if="${((datas.totalPages) le 3)}" th:each="i : ${#numbers.sequence(1, (datas.totalPages le 1)? 1:(datas.totalPages))}"
            data-th-classappend="${(datas.number + 1) eq i} ? 'active' : ''" >
            <a class="page-link" th:onclick="'javascript:up(\''+${i }+'\');'" >
                <span class="span_nb" th:text="${i}">1</span>
            </a>
        </li>
        <!-- 当前页面小于等于4 -->
        <li class="page-item this_y" th:if="${((datas.number + 1) le 3) and ((datas.totalPages) gt 3) and ((datas.number + 1) != 3)}" th:each="i : ${#numbers.sequence(1,3)}"
            data-th-classappend="${(datas.number + 1) eq i} ? 'active' : ''" >
            <a class="page-link" th:onclick="'javascript:up(\''+${i }+'\');'" >
                <span class="span_nb" th:text="${i}">2</span>
            </a>
        </li>

        <li class="page-item disabled this_y" th:if="${((datas.number + 1) le 3) and ((datas.totalPages) gt 3) and ((datas.number + 1) != 3)}">
            <a class="page-link">
                <span aria-hidden="true">...</span>
            </a>
        </li>

        <!-- 最后一页与当前页面之差，小于等于3 -->
        <li class="page-item disabled" th:if="${((datas.totalPages-(datas.number + 1)) le 2) and ((datas.number + 1) gt 3)}">
            <a class="page-link">
                <span aria-hidden="true">...</span>
            </a>
        </li>
        <li class="page-item disabled this_y" th:if="${((datas.totalPages-(datas.number + 1)) le 2) and ((datas.number + 1) gt 3)}" th:each="i : ${#numbers.sequence(datas.totalPages-2, datas.totalPages)}"
            data-th-classappend="${(datas.number + 1) eq i} ? 'active' : ''" >
            <a class="page-link" th:onclick="'javascript:up(\''+${i }+'\');'" ><!-- th:attr="page=${i} - 1" -->
                <span  class="span_nb" th:text="${i}"></span>
            </a>
        </li>

        <!-- 最后一页与当前页面之差大于3，且当前页面大于4-->
        <li class="page-item disabled" th:if="${((datas.number + 1) gt 2) and ((datas.totalPages-(datas.number + 1)) gt 2 )}">
            <a class="page-link">
                <span aria-hidden="true">...</span>
            </a>
        </li>
        <li class="page-item active this_y" th:if="${((datas.number + 1) gt 2) and ((datas.totalPages-(datas.number + 1)) gt 2 )}">
            <a  class="page-link" th:onclick="'javascript:up(\''+${datas.number+2 }+'\');'"><span class="span_nb" th:text="${datas.number + 1}"></span></a>
        </li>
        <li class="page-item this_y" th:if="${((datas.number + 1) gt 2) and ((datas.totalPages-(datas.number + 1)) gt 2 )}">
            <a  class="page-link" th:onclick="'javascript:up(\''+${datas.number+3 }+'\');'"><span class="span_nb" th:text="${datas.number + 2}"></span></a>
        </li>
        <li class="page-item disabled" th:if="${((datas.number + 1) gt 2) and ((datas.totalPages-(datas.number + 1)) gt 2 )}">
            <a class="page-link">
                <span aria-hidden="true">...</span>
            </a>
        </li>
        <!--下一页-->
        <li th:class="${datas.number + 1 ge datas.totalPages} ? 'disabled' : ''">
            <a class="a_button" th:if="${not datas.last}"
               th:onclick="'javascript:next(\''+${datas.number}+'\');'">下一页</a>
            <a class="a_button stop" th:if="${datas.last}" href="javascript:void(0);">下一页</a>
        </li>
        <!--尾页-->
        <li class="page-item"
            data-th-classappend="${(datas.number + 1) eq datas.totalPages} ? 'active' : ''">
            <button class="page-end bu_color" th:onclick="'javascript:up(\''+${datas.totalPages }+'\');'">尾页</button>
        </li>
    </ul>
    <div class="div_page_right">
    </div>
</div>

<script>
    $(".pagination").find(".this_y").eq(0).find(".span_nb").addClass("on");

    $(".pagination .this_y").click(function () {
        $(".this_y").find(".span_nb").removeClass("on");
        $(this).find(".span_nb").addClass("on");

    });


</script>
